<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="./css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<title></title>
	</head>
	<body>
		<header class="container">
			<a href="../分类/index.html"><div class="header_left"></div></a>
			<div class="header_center">文科类</div>
		</header>
		<div class="search">
			输入您要查找的信息
		</div>
		<ul class="table">
			<li><a href="#">
					<h4>全部<span class="spans" style="display: inline-block;"></span></h4>
				</a></li>
			<li><a href="#">
					<h4>待付款<span class="spans"></span></h4>
				</a></li>
			<li><a href="#">
					<h4>待发货<span class="spans"></span></h4>
				</a></li>
			<li><a href="#">
					<h4>待收货<span class="spans"></span></h4>
				</a></li>
			<li><a href="#">
					<h4>待收货<span class="spans"></span></h4>
				</a></li>
		</ul>
		<div class="tab-con">
			<div class="item" style="display: block!important;">
				<div class="menu">
					<figure>
							<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
						<div class="wenzi2">
							<p>生活实用心理学课程，教你轻松应对生活难题</p>
							<p>生活中的实用宝典</p>
							<p>共30讲</p>
							<div class="wenzi2_bottom">
								<p>￥198</p>
								<p>120人已订阅</p>
							</div>
						</div>

					</figure>
				</div>
				<div class="menu">
					<figure>
							<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
						<div class="wenzi2">
							<p>生活实用心理学课程，教你轻松应对生活难题</p>
							<p>生活中的实用宝典</p>
							<p>共30讲</p>
							<div class="wenzi2_bottom">
								<p>￥198</p>
								<p>120人已订阅</p>
							</div>
						</div>
				
					</figure>
				</div>
				<div class="menu">
					<figure>
							<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
						<div class="wenzi2">
							<p>生活实用心理学课程，教你轻松应对生活难题</p>
							<p>生活中的实用宝典</p>
							<p>共30讲</p>
							<div class="wenzi2_bottom">
								<p>￥198</p>
								<p>120人已订阅</p>
							</div>
						</div>
				
					</figure>
				</div>
				<div class="menu">
					<figure>
							<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
						<div class="wenzi2">
							<p>生活实用心理学课程，教你轻松应对生活难题</p>
							<p>生活中的实用宝典</p>
							<p>共30讲</p>
							<div class="wenzi2_bottom">
								<p>￥198</p>
								<p>120人已订阅</p>
							</div>
						</div>
				
					</figure>
				</div>
				<div class="menu">
					<figure>
							<img src="./img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
						<div class="wenzi2">
							<p>生活实用心理学课程，教你轻松应对生活难题</p>
							<p>生活中的实用宝典</p>
							<p>共30讲</p>
							<div class="wenzi2_bottom">
								<p>￥198</p>
								<p>120人已订阅</p>
							</div>
						</div>
				
					</figure>
				</div>
			</div>
			<div class="item" style="display: none;">
				2
			</div>
			<div class="item" style="display: none;">
				3
			</div>
			<div class="item" style="display: none;">
				4
			</div>
			<div class="item" style="display: none;">
				5
			</div>
		</div>
<div class="footer1 container">
					<ul>
						<li>
							<a href="../首页/index.html">
								<span>&#xe751;</span>
								<span>首页</span>
							</a>
						</li>
						<li>
							<a href="../课程/index.html">
								<span>&#xe614;</span>
								<span>课程</span>
							</a>
						</li>
						<li>
							<a href="../话题/index.html">
								<span>
									&#xe630;
									</svg>
								</span>
								<span>话题</span>
							</a>
						</li>
						<li>
							<a href="../我的/index.html">
								<span>&#xe600;</span>
								<span>我的</span>
							</a>
						</li>
					</ul>
				</div>
	</body>
</html>




<script type="text/javascript">
	var table = document.querySelector('.table')
	var lis = table.querySelectorAll('li')
	var item = document.querySelectorAll('.item')
	console.log(item)
	var spans = document.querySelectorAll('.spans')
	console.log(spans)
	for (var i = 0; i <= lis.length - 1; i++) {
		lis[i].setAttribute('index', i);
		lis[i].onclick = function() {
			var index = this.getAttribute('index')
			for (var i = 0; i <= item.length - 1; i++) {
				item[i].style.display = 'none'
			}
			for (var i = 0; i <= spans.length - 1; i++) {
				spans[i].style.display = 'none'
			}
			item[index].style.display = 'block'
			console.log(index)
			spans[index].style.display = 'inline-block'
		}
	}
</script>
